import React, { Component, PropTypes } from 'react'
import { hashHistory } from 'react-router'
import { Icon } from 'antd-mobile'

const arr = [
  {
    name: '微盘',
    link: '/micro',
  },
  {
    name: '中盘',
    link: '',
  },
  {
    name: '账户',
    link: '/account',
  },
  {
    name: '财经',
    link: '/finance',
  },
  {
    name: '排行',
    link: '',
  },
]

export default class FooterTab extends Component {
  constructor({defaultIndex}) {
    super()
    this.state = {
      tabIndex: defaultIndex,
    }
  }
  render() {
    const { tabIndex } = this.state
    return (
      <footer className={`cm-footer-box`}>
        {
          arr.map((v, i) => (
            <div
              key={i}
              className={`${tabIndex === i ? '-active' : ''}`}
              onClick={() => {
                if (tabIndex === i) return
                this.setState({tabIndex: i}, () => {
                  if (v.link) {
                    hashHistory.push(v.link)
                  }
                })
              }}
            >
              <Icon type="question" />
              <span>{v.name}</span>
            </div>
          ))
        }
      </footer>
    )
  }
}

FooterTab.defaultProps = {
  defaultIndex: 0,
}

FooterTab.propTypes = {
  defaultIndex: PropTypes.number.isRequired,
}